<template>
  <div class="app-container flex flex-col">
    <div class="flex">
      <el-select
        v-model="selectGroups"
        multiple
        filterable
        clearable
        collapse-tags
        size="mini"
        :placeholder="`请选择 ${$route.meta.groupMapKey} 内的分组`"
        style="width: 400px; margin-right: 10px;"
      >
        <el-option
          v-for="group in groupNames"
          :key="group"
          :label="group"
          :value="group"
        >
        </el-option>
      </el-select>
      <el-button
        type="primary"
        size="mini"
        @click="selectAll()"
      >
        全选
      </el-button>
      <el-button
        type="success"
        size="mini"
        class="ml-2"
        @click="copyGroups()"
      >
        复制组别
      </el-button>
      <el-button size="mini" class="ml-2" @click="copyLastGroups">
        copy last groups
      </el-button>
      <el-button size="mini" class="ml-2" @click="copyUrl">
        copy url
      </el-button>
    </div>
    <div class="flex-1">
      <RangeLine
        :show-line-type="3"
        :group-map="groupMap[groupMapKey]"
        :select-groups="selectGroups"
      ></RangeLine>
    </div>
  </div>
</template>

<script>
import _ from 'lodash'
import { fifthAddechart, bgColor, copyTextToClipboard, getSeriesForLineTypeThree } from '@/utils/study.js'

import {
  TWO_GROUP_MAP,
  THREE_GROUP_MAP,
  FOUR_GROUP_MAP,
  FIVE_GROUP_MAP,
  SIX_GROUP_MAP,
  SEVEN_GROUP_MAP,
  EIGHT_GROUP_MAP,
  TEN_GROUP_MAP,
  SIXTEEN_GROUP_MAP,
  TWELVE_GROUP_MAP,
  TWENTYFOUR_GROUP_MAP
} from '@/utils/study.js'

const groupMap = {
  TWO_GROUP_MAP,
  THREE_GROUP_MAP,
  FOUR_GROUP_MAP,
  FIVE_GROUP_MAP,
  SIX_GROUP_MAP,
  SEVEN_GROUP_MAP,
  EIGHT_GROUP_MAP,
  TEN_GROUP_MAP,
  SIXTEEN_GROUP_MAP,
  TWELVE_GROUP_MAP,
  TWENTYFOUR_GROUP_MAP
}

export default {
  data() {
    return {
      selectGroups: [],
      groupMap,
      fifthAddechart,
      yAxisSplitLine: {
        show: true,
        lineStyle: {
          color: [
            bgColor, // 根据 -0.1 是否移除
            ...fifthAddechart.toReversed().flatMap((color) => [
              color,
              ...Array(9).fill(bgColor) // 每个颜色后面跟随9个白色
            ])
          ],
          // type: 'solid'
          type: 'dashed'
        }
      }
    }
  },
  computed: {
    groupNames() {
      return Object.keys(this.groupMap[this.groupMapKey])
    },
    selectGroupMap() {
      return _.pick(this.groupMap[this.groupMapKey], this.selectGroups)
    }
  },
  created() {
    this.groupMapKey = this.$route.meta.groupMapKey
    this.selectGroups = _.cloneDeep(this.groupNames)
  },
  methods: {
    selectAll() {
      this.selectGroups = _.cloneDeep(this.groupNames)
    },
    copyGroups() {
      copyTextToClipboard(JSON.stringify(this.selectGroups))
    },
    // 复制最后一期号码所在组的号码
    copyLastGroups() {
      const allValues = getSeriesForLineTypeThree(this.allValues, _.pick(this.groupMap[this.groupMapKey], this.selectGroups))
      const allGroupAccuracy = _.last(allValues).allGroupAccuracy
      const currentAllGroupsNumber = Array.from(new Set(allGroupAccuracy.map(e => e.groupsNumber).flat())).sort((a, b) => a - b)
      navigator.clipboard.writeText(`[
        ${currentAllGroupsNumber.join(',')}
      ]`)
    }
  }
}

</script>
